<template>
    <el-tabs type="border-card" class="edittabform">
        <el-tab-pane label="数据">
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>数据表格</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-select v-model="obj.tableData.tableId" filterable clearable placeholder="请选择数据" size="mini"
                        @change="tableSelectChange">
                        <el-option v-for="item in dataTableList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>系列名称</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-select v-model="obj.tableData.xId" filterable clearable placeholder="请选择数据" size="mini">
                        <el-option v-for="item in columnData" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" v-for="(item, index) in obj.tableData.barList"
                :key="'selecty' + index">
                <el-col :span="8" class="editlabel">
                    <span>数据项</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model.number="item.name" placeholder="数据名称" />
                    <el-select v-model="item.beginTimeId" filterable placeholder="开始时间" size="mini">
                        <el-option v-for="item in columnData" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                    <el-select v-model="item.endTimeId" filterable placeholder="结束时间" size="mini">
                        <el-option v-for="item in columnData" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                    <i class="el-icon-error zzlistbtn" v-if="index > 0"
                        @click="deleteDataYinfo(obj.tableData.barList, index)"></i>
                </el-col>

            </el-row>
            <div class="addybtn" @click="addDataYinfo(obj.tableData.barList)">
                + 添加数据
            </div>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>数据量</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input v-model.number="obj.tableData.count" max="3600" type="number"
                        @change="setValueMaxInfo(3600, obj.tableData, 'count')" />
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>刷新间隔</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input type="number" v-model.number="obj.tableData.reloadTime" class="miniinput"
                        @change="reloadTimeChangeHandle" />
                    <span>秒</span>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="样式">
            <el-collapse v-model="collapseActives" class="edittypeform">
                <!-- <el-row type="flex" class="editformitem" align="middle">
                    <el-col :span="8" class="editlabel">
                        <span>网格线</span>
                    </el-col>
                    <el-col :span="16" class="editcontent">
                        <el-checkbox v-model="obj.tableData.isShowGrid"></el-checkbox>
                    </el-col>
                </el-row> -->
                <el-collapse-item title="图形" name="1">
                    <el-row type="flex" class="editformitem">
                        <el-col :span="8" class="editlabel">
                            <span>配色方案</span>
                        </el-col>
                        <el-col :span="16" class="editcontent">
                            <el-select v-model="obj.tableData.colorId" filterable placeholder="请选择" size="mini"
                                @change="colorChangeHandle()">
                                <el-option v-for="item in colorMap" :key="item.id" :label="item.name"
                                    :value="item.id"></el-option>
                            </el-select>
                            <br>
                            <div class="listcolor">
                                <div @dblclick="deleteListColor(index)" title="双击删除"
                                    v-for="(item, index) in obj.tableData.colors" :key="index"
                                    :style="{ backgroundColor: item }" class="itemcolor"></div>
                                <div class="itemcolor colorsadd">
                                    <span>+</span>
                                    <el-color-picker v-model="defaultColor" size="small" show-alpha
                                        :predefine="predefineColors"
                                        @active-change="setListColorChange($event)"></el-color-picker>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="editformitem" align="middle">
                        <el-col :span="8" class="editlabel">
                            <span>网格线</span>
                        </el-col>
                        <el-col :span="16" class="editcontent">
                            <el-checkbox v-model="obj.tableData.isShowGrid"></el-checkbox>
                        </el-col>
                    </el-row>
                </el-collapse-item>
                <!-- 
                    <el-row type="flex" class="editformitem" align="middle">
                        <el-col :span="8" class="editlabel">
                            <span>显示背景</span>
                        </el-col>
                        <el-col :span="16" class="editcontent sldyinput">
                            <el-checkbox v-model="obj.tableData.showBackground"></el-checkbox>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="editformitem" align="middle" v-if="obj.tableData.showBackground">
                        <el-col :span="8" class="editlabel">
                            <span>背景色</span>
                        </el-col>
                        <el-col :span="16" class="editcontent sldyinput">
                            <el-color-picker popper-class="mycolorview" v-model="obj.tableData.backgroundStyleColor"
                                size="small" show-alpha :predefine="predefineColors"
                                @active-change="setColorChange(obj.tableData, 'backgroundStyleColor', $event)" />
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="editformitem" align="middle">
                        <el-col :span="8" class="editlabel">
                            <span>网格线</span>
                        </el-col>
                        <el-col :span="16" class="editcontent">
                            <el-checkbox v-model="obj.tableData.isShowGrid"></el-checkbox>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="editformitem" align="middle">
                        <el-col :span="8" class="editlabel">
                            <span>堆叠显示</span>
                        </el-col>
                        <el-col :span="16" class="editcontent sldyinput">
                            <el-checkbox v-model="obj.tableData.iSstack"></el-checkbox>
                        </el-col>
                    </el-row>
                    <el-row type="flex" class="editformitem" align="middle">
                        <el-col :span="8" class="editlabel">
                            <span>纵向显示</span>
                        </el-col>
                        <el-col :span="16" class="editcontent sldyinput">
                            <el-checkbox v-model="obj.tableData.isZong"></el-checkbox>
                        </el-col>
                    </el-row>
                -->
                <!-- <el-collapse-item title="图例" name="2">
                    <el-row type="flex" class="editformitem">
                        <el-col :span="8" class="editlabel">
                            <span>显示图例</span>
                        </el-col>
                        <el-col :span="16" class="editcontent">
                            <el-checkbox v-model="obj.tableData.isShowLegend"></el-checkbox>
                        </el-col>
                    </el-row>
                    <template v-if="obj.tableData.isShowLegend">
                        <el-row type="flex" class="editformitem" align="middle">
                            <el-col :span="8" class="editlabel">
                                <span>字体</span>
                            </el-col>
                            <el-col :span="16" class="editcontent sldyinput">
                                <input v-model.number="obj.tableData.textfontSize" class="miniinput" type="number" />
                                <el-color-picker v-model="obj.tableData.textColor" size="small" show-alpha
                                    :predefine="predefineColors" popper-class="mycolorview"
                                    @active-change="setColorChange(obj.tableData, 'textColor', $event)" />
                                <div class="fontstylev">
                                    <div :class="['fontitem', { 'active': obj.tableData.textFontWeight == 'bold' }]"
                                        @click="setFontStyle('fontWeight', obj.tableData, 'textFontWeight')"><i
                                            class="iconfont icon-zitijiacu"></i>
                                    </div>
                                    <div :class="['fontitem', { 'active': obj.tableData.textFontStyle == 'italic' }]"
                                        @click="setFontStyle('fontStyle', obj.tableData, 'textFontStyle')"><i
                                            class="iconfont icon-zitixieti"></i>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row type="flex" class="editformitem" align="middle">
                            <el-col :span="8" class="editlabel">
                                <span>图标</span>
                            </el-col>
                            <el-col :span="16" class="editcontent">
                                <el-radio-group v-model="obj.tableData.icon" size="mini">
                                    <el-radio-button label="circle">圆形</el-radio-button>
                                    <el-radio-button label="rect">矩形</el-radio-button>
                                    <el-radio-button label="triangle">三角形</el-radio-button>
                                </el-radio-group>
                            </el-col>
                        </el-row>
                    </template>
                </el-collapse-item> -->
                <!--
                <el-collapse-item title="标签" name="3">
                    <el-row type="flex" class="editformitem">
                        <el-col :span="8" class="editlabel">
                            <span>使用标签</span>
                        </el-col>
                        <el-col :span="16" class="editcontent">
                            <el-checkbox v-model="obj.tableData.isShowValue"></el-checkbox>
                        </el-col>
                    </el-row>
                    <template v-if="obj.tableData.isShowValue">
                        <el-row type="flex" class="editformitem" align="middle">
                            <el-col :span="8" class="editlabel">
                                <span>字体</span>
                            </el-col>
                            <el-col :span="16" class="editcontent sldyinput">
                                <input v-model.number="obj.tableData.valuefontSize" class="miniinput" type="number" />
                                <el-color-picker v-model="obj.tableData.valueColor" size="small" show-alpha
                                    :predefine="predefineColors" popper-class="mycolorview"
                                    @active-change="setColorChange(obj.tableData, 'valueColor', $event)" />
                                <div class="fontstylev">
                                    <div :class="['fontitem', { 'active': obj.tableData.valueFontWeight == 'bold' }]"
                                        @click="setFontStyle('fontWeight', obj.tableData, 'valueFontWeight')"><i
                                            class="iconfont icon-zitijiacu"></i>
                                    </div>
                                    <div :class="['fontitem', { 'active': obj.tableData.valueFontStyle == 'italic' }]"
                                        @click="setFontStyle('fontStyle', obj.tableData, 'valueFontStyle')"><i
                                            class="iconfont icon-zitixieti"></i></div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row type="flex" class="editformitem" align="middle">
                            <el-col :span="8" class="editlabel">
                                <span>位置</span>
                            </el-col>
                            <el-col :span="16" class="editcontent">
                                <el-radio-group v-model="obj.tableData.lablePosition" size="mini">
                                    <el-radio-button label="">自动</el-radio-button>
                                    <el-radio-button label="insideTop">内侧</el-radio-button>
                                    <el-radio-button label="top">外侧</el-radio-button>
                                    <el-radio-button label="inside">居中</el-radio-button>
                                </el-radio-group>
                            </el-col>
                        </el-row>
                        <el-row type="flex" class="editformitem" align="middle">
                            <el-col :span="8" class="editlabel">
                                <span>小数点位</span>
                            </el-col>
                            <el-col :span="16" class="editcontent sldyinput">
                                <input v-model.number="obj.tableData.decimal" class="miniinput" type="number" />
                            </el-col>
                        </el-row>
                    </template>
                </el-collapse-item> -->
                <el-collapse-item title="标题" name="4">
                    <title-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"
                        :setFontStyle="setFontStyle"></title-form>
                </el-collapse-item>
            </el-collapse>
        </el-tab-pane>
        <el-tab-pane label="布局">
            <box-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"></box-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
    name: "GantetuForm",
    components: {
        TitleForm: () => import('../mixin/TitleForm.vue'),
        BoxForm: () => import('../mixin/BoxForm.vue'),
    },
    computed: {
        ...mapGetters(['colorMap'])
    },
    props: {
        predefineColors: Array,
        obj: Object,
        dataTableList: Array,
        columnData: Array,
        tableSelectChange: Function,
        deleteDataYinfo: Function,
        setColorChange: Function,
        setFontStyle: Function,
        reloadTimeChangeHandle: Function,
    },
    data() {
        return {
            collapseActives: ['1', '2', '3', '4', '5'],
            defaultColor: "",
        }
    },
    model: {
        prop: "obj",
        event: "change",
    },
    methods: {
        addDataYinfo(item) {
            if (item.length >= 10) {
                this.$message.error("已达到可设置最大数据列");
                return false;
            }
            item.push({
                beginTimeId: "",
                endTimeId: "",
                name: ""
            });
        },
        // #系列颜色相关
        colorChangeHandle() {
            this.colorMap.forEach(e => {
                if (e.id == this.obj.tableData.colorId) {
                    this.obj.tableData.colors = e.colors;
                }
            })
        },
        setListColorChange(val) {
            this.obj.tableData.colors.push(val);
        },
        deleteListColor(index) {
            this.obj.tableData.colors.splice(index, 1)
        },
        // #endregion
    }
}
</script>